<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<link rel="stylesheet" href="js/jquery.mloading.css">

<script src="js/jquery-1.8.0.min.js"></script>
<script src="js/jquery.fly.min.js"></script>
<script src="js/jquery.mloading.js"></script>
<!--[if lte IE 9]>
<script src="js/requestAnimationFrame.js"></script>
<![endif]-->

</head>
<body>

	<div class="container" style="width:100px;height:100px;margin: 0 auto;position: absolute;top:200px;">
		<div style="background-color: red;width:100px;height:100px;position: absolute;left:0;top:0;"></div>
	</div>
	
	<div style="text-align: center;margin-top: 20px;">
		<span class="prev" style="background-color: #218080;color:#fff;padding: 10px; margin-right: 20px;cursor: pointer;">上一步</span>
		<span class="next" style="background-color: #218080;color:#fff;padding: 10px; margin-right: 20px;cursor: pointer;">下一步</span>
	</div>

</body>

	<script type="text/javascript">
		// 获取屏幕宽度【兼容IE78】 
		function getWindowWidth() {
			var winW = window.innerWidth;
			var ieVersion = navigator.appVersion.split(";")[1].replace(/[ ]/g, "");
			if (isIE78()) {
				winW = document.documentElement.clientWidth;
			}
			return winW;
		}
		
		function isIE78(){
			var ieVersion = navigator.appVersion.split(";")[1].replace(/[ ]/g, "");
			if (navigator.appName == "Microsoft Internet Explorer"
				&& (ieVersion == "MSIE7.0" || ieVersion == "MSIE8.0")) {
				return true;
			}
			return false;
		}
		
		// 显示遮罩
		function showLoading(){
			$('body').mLoading("show");
		}

		// 隐藏遮罩
		function hideLoading(){
			$('body').mLoading("hide");
		}
	
		$(function(){
			
			var color = ['red', 'green', 'blue'];
			var i = 0;
			
			var fullX = getWindowWidth();
			var centerX = fullX / 2 - 50;
			var centerY = 200 - 50;
			
			$('.container').css({'left':getWindowWidth() / 2 - 50});
			var current = '<div style="background-color: {{color}};width:{{width}}px;height:{{height}}px;position: absolute;left:0;top:0;"></div>';
			
			var prev = true;
			var next = true;
			
			$('.prev').click(function(event){
				if(prev){
					prev = false;
					
					i--;
					i = i < 0 ? 2 : i;
					
					var temp = current.replace('{{color}}', $('.container div').css('background-color'))
					.replace('{{width}}', 100)
					.replace('{{height}}', 100);
					$('.container div').css({'background-color':'#fff'});
					
					
					$(temp).fly({
						start: {
							left: centerX,
							top: centerY
						},
						end: {
							left: fullX,
							top: centerY,
							width: 0,
							height: 0
						},
						onEnd: function(){
							this.destory();
							
							showLoading();
							setTimeout(function(){
								hideLoading();
								
								temp = current.replace('{{color}}', color[i])
								.replace('{{width}}', 10)
								.replace('{{height}}', 10);
								$(temp).fly({
									start: {
										left: 0,
										top: centerY
									},
									end: {
										left: centerX,
										top: centerY,
										width: 100,
										height: 100
									},
									onEnd: function(){
										$('.container div').css({'background-color':color[i]});
										this.destory();
										prev = true;
									}
								});
							}, 1000);
						}
					});
				}
			});

			
			$('.next').click(function(){
				if(next){
					next = false;
					
					i++;
					i = i > 2 ? 0 : i;
					
					var temp = current.replace('{{color}}', $('.container div').css('background-color'))
										.replace('{{width}}', 100)
										.replace('{{height}}', 100);
					$('.container div').css({'background-color':'#fff'});
					
					$(temp).fly({
						start: {
							left: centerX,
							top: centerY
						},
						end: {
							left: 0,
							top: centerY,
							width: 0,
							height: 0
						},
						onEnd: function(){
							this.destory();
							
							showLoading();
							setTimeout(function(){
								hideLoading();
								
								temp = current.replace('{{color}}', color[i])
								.replace('{{width}}', 10)
								.replace('{{height}}', 10);
								$(temp).fly({
									start: {
										left: fullX,
										top: centerY
									},
									end: {
										left: centerX,
										top: centerY,
										width: 100,
										height: 100
									},
									onEnd: function(){
										$('.container div').css({'background-color':color[i]});
										this.destory();
										next = true;
									}
								});
							}, 1000);
						}
					});
				}
			});
			
		});
	
	</script>

</html>